<template>
	<div class="bottom uv-safe-area-inset-bottom" v-if="!audit" @click.stop>
		<div class="bottom-fixed uv-safe-area-inset-bottom" @click.stop>
			<div class="menu-box" v-if="show === 'menu'" @click.stop>
				<div class="menu-search" @click="openComment">
					<i class="icon-comment iconfont"></i>
					<text>说点什么...</text>
				</div>
				<div class="menu-icon">
					<div class="menu-item" @click='srcollComment'>
						<i class="iconfont icon-comment"></i>
						<text class="num" v-if="commentCount > 0">{{ commentCount }}</text>
					</div>
					<div class="menu-item" :class="{ active: articleData['isLike'] }" @click="clickLike">
						<i class="iconfont icon-dianzan1" v-if="articleData['isLike']"></i>
						<i class="iconfont icon-dianzan" v-else></i>
						<text class="num like-num" v-if="likeCount > 0">{{ likeCount }}</text>
					</div>
					<div class="menu-item" :class="{ active: articleData['isCollection'] }" @click="clickCollection">
						<i class="iconfont icon-shoucang1" v-if="articleData['isCollection']"></i>
						<i class="iconfont icon-shoucang" v-else></i>
					</div>
					<div class="menu-item">
						<button class="uv-reset-button" open-type="share">
							<i class="iconfont icon-weixin"></i>
						</button>
					</div>
				</div>
			</div>
			<div class="input-box" v-else>
				<input v-model="commentVal" class="jx-input" confirm-type='send' focus :placeholder="placeholder" @confirm='sendComment' />
				<uv-button :customStyle="{ height: '65rpx', width: '130rpx' }" type='primary' shape='circle' text="发送" @click="sendComment"></uv-button>
			</div>
		</div>

		<jx-userinfo-popup ref="userInfoPopupRef" />
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import file from '@/utils/file/index.js'
	import tools from '@/utils/tools/index.js'
	import users from '@/api/users/index.js'
	import comments from '@/api/comments/index.js'
	import { useUserStore } from '@/store/user.js'
	import { useSystemStore } from '@/store/system.js'
	import { useGeneralStore } from '@/store/general.js'
	import article_likes from '@/api/article_likes/index.js'
	import article_collections from '@/api/article_collections/index.js'

	const test = uni.$uv.test;
	const emits = defineEmits(['update'])
	const props = defineProps({
		articleData: {
			type: Object,
			default: () => ({})
		}
	})

	const userStore = useUserStore()
	const systemStore = useSystemStore();
	const generalStore = useGeneralStore();


	const index = ref('');
	const show = ref('menu');
	const commentVal = ref('');
	const userInfoPopupRef = ref(null);
	const placeholder = ref('想说点什么...');
	const replyData = ref({ is_reply: 0, comment_id: '', reply_comment_id: '', reply_user_id: '' });

	const userInfo = computed(() => userStore.userInfo);
	const navbarInfo = computed(() => systemStore.navbarInfo);
	const audit = computed(() => generalStore.systemData.base.audit);

	const commentCount = computed(() => {
		const { comment_count } = props.articleData;
		return comment_count > 99 ? '99+' : comment_count
	})

	const likeCount = computed(() => {
		const { like_count } = props.articleData;
		return like_count > 99 ? '99+' : like_count
	})

	function openComment() {
		if (!userStore.token) return userStore.init();
		show.value = 'comment';
	}

	function closeComment() {
		index.value = '';
		show.value = 'menu';
		commentVal.value = '';
		placeholder.value = '';
		replyData.value = { is_reply: 0, comment_id: '', reply_comment_id: '', reply_user_id: '' };
	}

	uni.$on('update', ({ data, index: i }) => {
		openComment();
		index.value = i;
		placeholder.value = '回复:' + data['reply_user']['nickname'];
		replyData.value = {
			is_reply: 1,
			comment_id: data['comment_id'],
			reply_comment_id: data['reply_comment_id'],
			reply_user_id: data['reply_user']['user_id']
		};
	})

	async function sendComment() {
		if (!commentVal.value) {
			return tools.toast({ title: '请输入评论' })
		}

		// 更新昵称
		if (!userInfo.value.user_info_update) {
			console.log(userInfoPopupRef.value);
			return userInfoPopupRef.value.open();
		}

		tools.loading();
		const { _id: article_id } = props.articleData;
		const response = await comments.send({ ...replyData.value, article_id, content: commentVal.value })
		uni.hideLoading();
		if (response['code'] === 200) {
			tools.toast({ title: '评论成功', })
			response['data']['user']['avatar'] = file.getFileUrl(response['data']['user']['avatar']);
			uni.$emit('comment', { data: response['data'], index: index.value });
			closeComment();
		}
	}

	function srcollComment() {
		tools.getRect('#idComment').then(data => {
			tools.getRect('#idContainer').then(res => {
				uni.pageScrollTo({
					scrollTop: data.top - res.top - navbarInfo['value']['total'] - 10,
					duration: 150
				});
			})
		})
	}

	async function clickLike() {
		if (!userStore.token) return userStore.init();
		tools.loading();
		const { _id: article_id, isLike, like_count } = props.articleData;
		const response = await (isLike ? article_likes.delete({ article_id }) : article_likes.save({ article_id }));
		uni.hideLoading();
		if (response['code'] === 200) {
			tools.toast({ 'title': '成功' })
			emits('update', { type: 'like', value: !isLike })
		}
	}

	async function clickCollection() {
		if (!userStore.token) return userStore.init();
		tools.loading();
		const { _id: article_id, isCollection } = props.articleData;
		const response = await (isCollection ? article_collections.delete({ article_id }) : article_collections.save({ article_id }));
		uni.hideLoading();
		if (response['code'] === 200) {
			tools.toast({ 'title': '成功' })
			emits('update', { type: 'collection', value: !isCollection })
		}
	}

	defineExpose({
		closeComment
	})
</script>

<style lang="scss" scoped>
	.bottom {
		height: 120rpx;

		.bottom-fixed {
			height: 120rpx;
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			background: #fff;
			z-index: 9999;
			box-shadow: 0 0 11px rgba(0, 0, 0, .12);

			.menu-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0 $side-width;

				.menu-search {
					background: #f2f2f2;
					border-radius: 23px;
					height: 80rpx;
					flex: 1;
					display: flex;
					align-items: center;
					padding: 0 $side-width;

					.iconfont {
						color: $uv-tips-color;
						font-size: 38rpx;
					}

					text {
						margin-left: 5rpx;
						color: $uv-tips-color;
					}
				}

				.menu-icon {
					display: flex;
					align-items: center;

					.menu-item {
						display: flex;
						align-items: center;
						margin-left: 32rpx;
						position: relative;

						&.active {
							.iconfont {
								color: $uv-warning;
							}
						}

						.num {
							position: absolute;
							background: $uv-error;
							font-size: 22rpx;
							color: #fff;
							top: -13rpx;
							left: 30%;
							line-height: 1;
							padding: 4rpx 10rpx;
							border-radius: 100px;
							transform: scale(0.7);
						}

						.iconfont {
							font-size: 46rpx;
							vertical-align: bottom;
							margin-left: 6rpx;
							color: $uv-content-color;
						}

						.icon-weixin {
							color: #07c160;
						}
					}
				}
			}

			.input-box {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0 $side-width;

				.jx-input {
					width: 100%;
					box-sizing: border-box;
					height: 80rpx;
					background: #f2f2f2;
					border-radius: 23px;
					padding: 0 $side-width;
					font-size: 30rpx;
					margin-right: $side-width;
				}
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9998;
			background-color: rgba(0, 0, 0, 0);
		}
	}
</style>